import React from 'react'
import Menu from '@/components/common/menu'
import { sleep } from 'antd-mobile/es/utils/sleep'
const Home = () => {
    const [couponlist, SetCouponList] = React.useState([]);
    const [hasMore, SethasMore] = React.useState(false)
    const [page, SetPage] = React.useState(1)
    const [hotelList, SetHotelList] = React.useState([])
    const [keywords, SetKeywords] = React.useState('');


    React.useEffect(() => {
        GetCouponListData();
        GetHotelData();
    }, [])

    const GetCouponListData = async () => 
    {
        let result = await React.HTTP.post('/coupon/index');
        if (result.code == 1) {
            SetCouponList(result.data);
        }
    }

    const OnRefresh = async () => 
    {
        SetPage(1)
        SetHotelList([])
        SethasMore(true)

        await sleep(1000);
        await GetHotelData();
    }
    const loadMore = async () =>
    {
        await sleep(1000)
        GetHotelData()
    }

    const GetHotelData = async () => 
    {
        let result = await React.HTTP.post('/room/index', {
            keywords: keywords,
            page: page
        })

        if (result.code == 0) 
        {
            //没有更多数据
            SethasMore(false);
            return false
        }
        else 
        {
            //设置分页和列表合并
            SethasMore(true)
            SetHotelList(hotelList.concat(result.data))
            SetPage(page + 1)
        }
    }

    const handleSearch = async(val: string) =>
    {
        SetKeywords(val);
        await OnRefresh();
    }

    return (
        <>

            <React.UI.Swiper autoplay>
                {
                    couponlist.map((item: any) => {
                        return (
                            <React.UI.Swiper.Item key={item.id}>
                                <React.Router.NavLink to={`/coupon/info?cid=${item.id}`} style={{ width: '100%' }}>
                                    <React.UI.Image src={item.thumbtext} height={213} fit='cover' />
                                </React.Router.NavLink>
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="hotel_search">
                <React.UI.Input placeholder='请输入酒店名称' clearable value={keywords} onChange={(val: string) => {handleSearch(val)}}/>
            </div>

            <div className="hotellist">
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    <React.UI.List>
                        {
                            hotelList.map((item:any) =>{
                                return(
                                    <div className="item" key={item.id}>
                                        <React.Router.NavLink to={`/room/info?roomid=${item.id}`}>
                                            <div className="images">
                                                <div className="swipers">
                                                    <img src={item.thumb_text} alt="" />
                                                </div>
                                                <div className="title">{item.name}</div>
                                            </div>
                                            <div>
                                                <div className="item_top">
                                                    {
                                                        item.flag_text.map((flag:string, index:number) =>{
                                                            return(
                                                                <span key={index}>{flag}</span>
                                                            )
                                                        })
                                                    }
                                                </div>
                                                <div className="item_bot">
                                                    <div className="font">
                                                        <span className="price">￥{item.price}/晚</span>
                                                    </div>
                                                    <div className="btn">立即预定</div>
                                                </div>
                                            </div>
                                        </React.Router.NavLink>
                                    </div>
                                )
                            })
                        }
                    </React.UI.List>
                    {/* 列表滚动到底部自动加载更多数据。 */}
                    <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </React.UI.PullToRefresh>
            </div>

            <div style={{ height: '55px' }}></div>

            <Menu />
        </>
    )
}

export default Home;